<!--
	Full source code at: http://code.google.com/p/tin-can-can/source/browse/testzone
-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Tin Can Test Zone</title>

		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/skeleton.css">
		<link rel="stylesheet" href="css/layout.css">
        
        <style type="text/css">

		.tclogo {float:right;margin-left:20px;}
		.clear {clear:both;}
		h2 {margin:10px 0;}
		
        #topLinks a { font-size:0.7em; }
        a,a:visited {color:#39648F; text-decoration:none;}
        a:hover,a:focus {color:#754737; text-decoration:none;}
		.prototypeDiv {margin:25px 0;}
		
		input[type="text"],	input[type="password"],	input[type="email"] {display:inline;}
		
		li {margin:0 0 2px 5px;list-style:disc inside none;}
		
		.configInfo {diplay:none;}
		.configInfo .info {font-size:.9em;}
		.configInfo .settings {margin-left:15px;}
		.configInfo .settings span {font-weight:bold;}
		.configInfo .settings .label {text-align:left;padding:0 10px;}
		
		.infoDiv {border:1px dotted;padding:5px;}
		.rounded {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
		
		.warning {font-weight:bold; color:red;}
		
		.cssButton {
		background-color:#39648f;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		border:1px solid #39648f;
		display:inline-block;
		color:#ffffff;
		font:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:16px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;}
		.cssButton:visited {
		background-color:#39648f;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		border:1px solid #39648f;
		display:inline-block;
		color:#ffffff;
		font:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:16px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;}
		.cssButton:hover {
		background-color:#729fcc;
		color:#ffffff;}
		.cssButton:active {
		position:relative;
		top:1px;}
	
		</style>
		
		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-31502982-1']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
		
		</script>
		
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="config.js"></script>
		<script src="base64.js"></script>
		
		
        
        <script type="text/javascript">
        
		$(document).ready(function(){
			
            var PROTOTYPE_DEFAULT_NAME = Config.actor.name[0];
            var PROTOTYPE_DEFAULT_MBOX = Config.actor.mbox[0];
            var PROTOTYPE_ENDPOINT = Config.endpoint;
            var PROTOTYPE_AUTH = 'Basic ' + Base64.encode(Config.authUser + ':' + Config.authPassword);

			
			$('.ExampleLaunch').click(function(){
				var em = $("#defActorMbox").val();
				var mbox = (em.indexOf('mailto:') == 0) ? em : 'mailto:' + em;
				var nm = $("#defActorName").val();
				var actor = {'mbox' : [mbox], 'name' : [nm]};
				
				
				$(this).attr('href',$(this).attr('baseref') 
					+ "endpoint=" + encodeURIComponent($('#defEndpoint').val())
					+ "&auth=" + encodeURIComponent($('#defAuth').val())
					+ "&actor=" +encodeURIComponent(JSON.stringify(actor)));
				return true;
			});
			
			$('#MyLaunch').click(function(){
				var em = $("#defActorMbox").val();
				var mbox = (em.indexOf('mailto:') == 0) ? em : 'mailto:' + em;
				var nm = $("#defActorName").val();
				var actor = {'mbox' : [mbox], 'name' : [nm]};
				
				
				$(this).attr('href',$('#myActivityURL').val() + '?' 
					+ "endpoint=" + encodeURIComponent($('#defEndpoint').val())
					+ "&auth=" + encodeURIComponent($('#defAuth').val())
					+ "&actor=" +encodeURIComponent(JSON.stringify(actor))
					);
				return true;
			});


			$('.configInfo').show();
			$('#defEndpoint').val(PROTOTYPE_ENDPOINT);
			$('#defAuth').val(PROTOTYPE_AUTH);
			$('#defActorName').val(PROTOTYPE_DEFAULT_NAME);
			$('#defActorMbox').val(PROTOTYPE_DEFAULT_MBOX.replace('mailto:',''));

			
		});

        
        
        </script>
        
    </head>
    
    
    <body>
    		<div id="topLinks" style="text-align:center; width:100%;font-size:200%;margin:15px;">
    			<a style="" href="http://www.tincanapi.co.uk">TinCanAPI.co.uk Home</a>

    		</div>
			<div class="container">
				<div class='tclogo'><a target="_blank" href='http://www.tincanapi.co.uk'><img src='logo1.png'/></a></div>
				<h1>Tin Can Test Zone</h1>
				<div>
					<p>Welcome to the Test Zone! This page lets you test your activities against any LRS or test your LRS with a range of activities. </p>
					<p>Simply complete the configuration details below, then launch your chosen activity! </p>
					<p>NOTE: The prototype activties provided don't currently work in MS Internet Explorer, due to the way they handle cross-domain and authentication. 
					Please see Ben's recent comment on the <a href="http://scorm.com/project-tin-can-phase-3-distribution-of-contentcross-domain/">cross domain</a> page. 
					Please use a browser other than IE to try these prototypes or build your own!</p>
					<p>Compatiblity with IE is clearly something that needs to be addressed for client side reporting, and it is being looked at.</p>
				
				</div>
				
				
				
				<br class='clear'/>
				<div class="configInfo infoDiv rounded ">
					<h4>Configuration Settings</h4>
					<div class='info'>Refresh the page to restore the defaults
						<br/>
					</div>
					<table class='settings'>
						<tr><td class='label'>endpoint: <td/><td>
							<input type="text" name="defEndpoint" id="defEndpoint" />
						</td></tr>
						<tr><td  class='label'>authentication key: <td/><td>
							<input type="text" name="defAuth" id="defAuth" />
						</td></tr>
						<tr><td class='label'>Actor name: <td/><td>
							<input type="text" name="defActorName" id="defActorName" />
						</td></tr>
						<tr><td class='label'>Actor mbox: <td/><td>
							<input type="text" name="defActorMbox" id="defActorMbox" />
						</td></tr>
					</table>
					<span class="warning">WARNING: Name and email will appear in the LRS viewer. Use default or made-up names & email if you don't want yours to appear.</span>
				</div>

				<div class='prototypeDiv infoDiv rounded '>

				<h2>Launch your own!</h2>
				<p>URL of your activity:  <input type="text" name="myActivityURL" id="myActivityURL"  value="http://www.tincanapi.co.uk/testzone/StatementViewer/index.html"/>

				<a id="MyLaunch" target="_blank" class="MyLaunch cssButton" >Launch it!</a></p>

				</div>

				

				<div class='prototypeDiv infoDiv rounded'>
					<h2 class="">Statement Viewer</h2>
					
					<ul>
						<li>An application for displaying Tin Can statements using the query API.</li>
						<li>Displays all recent statements from an LRS</li>
						<li>Can be filtered by actor, verb or activity</li>
						<li>Useful for testing to see the output of your statements</li>
					</ul>
					<p><a target="_blank" class="ExampleLaunch cssButton" baseref="StatementViewer/index.html?" href="StatementViewer/index.html?" >Get Statements!</a></p>
				</div>

				
				<div class='prototypeDiv'>

				<h2>Adobe Captivate Wrapper</h2>
				<ul>
					<li>Insert an Adobe Captivate SWF orginally prolished for SCORM into this wrapper to reprot to Tin Can.</li>
					<li>Produced by <a href="http://www.twitter.com/garemoko" target="blank">@garemoko</a> - in no way affliated with Adobe themselves.</li>
					<li>Note: this is not production code, just an example of what can be done.</li>
				</ul>

				<a id="captivateExampleLaunch" target="_blank" class="ExampleLaunch cssButton" baseref="captivate/tin-can-can.htm?" href="captivate/tin-ca-can.htm?">Launch I Read This Example</a>
				</br>
				</br>
				

				</div>
				
				<div class='prototypeDiv'>

				<h2>I Read This</h2>
				<ul>
					<li>Search for a book title using Google Books API</li>
					<li>Reports user expeirenced book based on selection from returned search results</li>
					<li><a href="http://www.tincanapi.co.uk/wiki/Guide:_Building_your_first_Tin_Can_API_Activity" target="_blank">Click here for guide to building this activity for yourself.</a></li>
				</ul>

				<a id="bookExampleLaunch" target="_blank" class="ExampleLaunch cssButton" baseref="tinbook/tinbook.htm?" href="tinbook/tinbook.htm?">Launch I Read This Example</a>
				</br>
				</br>
				

				</div>
				
				<div class='prototypeDiv'>
					<h2 class="">Report Sample</h2>
					
					<ul>
						<li>A report page displaying different types of reports and information that can be generated with information stored in the LRS.</li>
						<li>The data reported is actual data generated by the prototypes below.</li>
						
					</ul>
					<a target="_blank" class="ExampleLaunch cssButton" baseref="ReportSample/index.html?" href="ReportSample/index.html?">View Report</a>
					</br>
					</br>
					<hr/>

				</div>

				<div class='prototypeDiv'>

				<h2>Golf Example</h2>
				
				<ul>
					<li>Records each time the course is launched with an attempt.(Uses LRS single statement puts.)</li>
					<li>Keeps track of the progress of a learner and provides for a returning learner to resume progress.(Uses LRS state get/put calls.)</li>
					<li>Records the learner question responses and overall score from the end of course assessment.(Uses LRS single and multi-statement puts/posts.) </li>
					<li>Records course completion.(Uses LRS single statement put with score reporting.)</li>
				</ul>

				<a class="ExampleLaunch cssButton" id="golfExampleLaunch" target="_blank" baseref="GolfExample_TCAPI/index.html?" href="GolfExample_TCAPI/index.html?" >Launch Golf Example</a>
				</br>
				</br>

				
				<hr/>


				</div>

				<div class='prototypeDiv'>

				<h2>Js Tetris</h2>
								

				<ul>
					<li>Allows the player to optionally report tetris game data back to the LRS.</li>
					<li>When enabled, reports when a player starts a new game of tetris.(Uses LRS single statement puts.)</li>
					<li>When enabled, reports when a player achieves a new level.(Uses LRS single statement puts.)</li>
					<li>When enabled, reports when a player's game is over, reporting score, levels completed,lines completed, etc.(Uses LRS single statement puts.)</li>
					<li>When enabled, reports when a player achieves a top 15 high score.(Uses LRS activity profile puts.)</li>
					<li>Reports the top 15 high scores achieved by all reporting players.(Uses LRS activity profile gets.)</li>
				</ul>
				<a id="jsExampleLaunch" href="" target="_blank" baseref="JsTetris_TCAPI/tetris.html?" class="ExampleLaunch cssButton">Launch Js Tetris</a>
				</br>
				</br>
				<hr/>


				</div>

				<div class='prototypeDiv'>

				<h2>Locator Example</h2>
				<ul>
					<li>Requires a browser/device that allows location tracking.</li>
					<li>Reports to the LRS when a user is at a specified geographic location and selects to "Save Location".(Uses LRS single statement puts with context.)</li>
					<li>Reports completion to the LRS when a user has visited and saved all of the specified locations in the course.(Uses LRS single statement puts with context.)</li>
					<li style="{font-weight:bold;}">For testing purposes, this example has a "cheat" such that by pressing '?' on the page, the finder will identify you as being at one of the placemarks.  Pressing '?' again will disable this "cheat".</li>
				</ul>
				<div class="warning">
					If you don't use a unique email address, you won't be able to try the course properly, as 'you' will have already visited all the locations, and won't be able to save them again.
				</div><br/>				
				<a id="locatorExampleLaunch" target="_blank" baseref="Locator_TCAPI/index.html?" href="Locator_TCAPI/index.html?" class="ExampleLaunch cssButton">Launch Locator Example</a>
				</br>
				</br>
				


				</div>
				
				
				


			</div>

    </body>
</html>
